<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1{
            width: 100px;
            height: 100px;
            background-color: beige;
        }
        .div2 {
            width: 300px;
            height: 300px;
            background-color: beige;
        }

        .bigFont {
            font-size: 40px;
        }

        .color {
            color: black;
        }
    </style>
</head>
<body>
<div id="div1">helloWorld1</div>
<div id="div2" class=".div2 bigFont">helloWorld2</div>
<script>
    /*
    * dom修改样式
    * 一.通过修改style属性修改样式
    * 二.修改className,修改样式
    * 三.通过classList修改,add/remove/replace修改样式
    * */
    //一。通过修改style属性修改样式
    var div1 = document.querySelector("#div1");
    div1.style.width = "200px";
    div1.style.height = "200px";
    div1.style.backgroundColor = "purple";
    //二.修改className,修改样式
    var div2 = document.querySelector("#div2");
    div2.className = "div2 bigFont";
    //三.通过classList修改,add/remove/replace修改样式
    div2.classList.add("color");
    //div2.classList.remove("div2");
    div2.classList.replace("div2","div1");
</script>
</body>
</html>